<template>
  <el-dialog v-model="detailVisible" title="详情" width="950" align-center class="detail-dialog">
    <div class="module">
      <el-tabs v-model="activeName" @tab-change="tabChangeHandler">
        <el-tab-pane label="详情" name="detail">
          <el-descriptions border :column="2" v-if="descriptionConfig.length > 0">
            <el-descriptions-item v-for="item of descriptionConfig" :key="item.key" :label="item.name">{{
              item.value
            }}</el-descriptions-item>
          </el-descriptions>
          <el-empty v-else description="无数据" class="no_tit" />
        </el-tab-pane>
        <el-tab-pane label="监控指标" name="indicators">
          <el-row :gutter="16" v-if="activeName === 'indicators'">
            <el-col :span="12" v-for="item in monitorMoudels" :key="item.key">
              <h3 class="sub-title">{{ item.name }}</h3>
              <div class="chart_box" v-if="dataList[item.key] && dataList[item.key].length > 0">
                <Echarts :option="item.option" :resize="true"></Echarts>
              </div>
              <el-empty v-else description="无数据" class="no_tit" />
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="closeDialog">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="AddOrEditBusiness">
import { ref } from "vue";
import Echarts from "@/components/ECharts/index.vue";
const detailVisible = ref<boolean>(false);
const activeName = ref<string>("detail");
const descriptionConfig = ref<any>([
  {
    key: "sid",
    value: "651ee33c-f61a-43c6-9510-c2e3491d4b3d",
    name: "资源原始ID"
  },
  {
    key: "name",
    value: "zhuganglie-yunyun1",
    name: "名称"
  },
  {
    key: "ip",
    value: "",
    name: "IP"
  },
  {
    key: "vdc_name",
    value: "",
    name: "VDC"
  },
  {
    key: "region_name",
    value: "region_name",
    name: "资源域名称"
  },
  {
    key: "asset_number",
    value: "123",
    name: "资产编号"
  }
]);
const setEchartsDefineOptions = (data, unit = "") => {
  if (!data.length) return null;
  const xAxisData: any = [];
  const seriesData: any = [];
  data.forEach(item => {
    xAxisData.push(item.time);
    seriesData.push(item.value);
  });
  return {
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(204,204,204,1)",
      borderWidth: "1",
      padding: [5, 5],
      confine: true,
      formatter: `{b0}<br/> {c0}${unit}`,
      textStyle: {
        color: "#666666",
        fontSize: 12
      }
    },
    xAxis: {
      type: "category",
      boundaryGap: false, // x轴体在0坐标显示
      data: xAxisData,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ccc"
        }
      },
      splitLine: {
        show: false,
        lineStyle: {
          color: "#f0f0f0"
        }
      },
      axisLabel: {
        // formatter: function (value) {
        //   const v1 = value.split(' ')
        //   return v1[0] + '\n' + v1[1]
        // },
        textStyle: {
          color: "#666666"
        }
      }
    },
    yAxis: {
      type: "value",
      splitNumber: 3,
      axisLine: {
        show: true,
        lineStyle: {
          color: "#ccc"
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: "dotted"
        }
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        textStyle: {
          color: "#666666"
        },
        formatter: `{value} ${unit}`
      }
    },
    grid: {
      show: true,
      left: "3%",
      right: "8%",
      top: "15%",
      bottom: "8%",
      containLabel: true,
      borderColor: "transparent"
    },
    series: [
      {
        data: seriesData,
        type: "line"
        // format: ''
      }
    ],
    color: ["#448afe", "#ffb71c", "#6b58c4", "#30b560", "#ffb71c"]
  };
};
const monitorMoudels = ref<any>([
  {
    key: "cpdczsl",
    name: "磁盘读操作速率",
    data_unit: ""
  },
  {
    key: "cpu",
    name: "CPU使用率",
    data_unit: ""
  },
  {
    key: "merm",
    name: "内存使用率",
    data_unit: ""
  },
  {
    key: "write",
    name: "磁盘写操作速率",
    data_unit: ""
  }
]);
const dataList = ref<any>({
  cpdczsl: [
    {
      time: "2024-11-10",
      value: 120
    },
    {
      time: "2024-11-11",
      value: 130
    },
    {
      time: "2024-11-12",
      value: 100
    },
    {
      time: "2024-11-13",
      value: 160
    }
  ],
  cpu: [
    {
      time: "2024-11-10",
      value: 120
    },
    {
      time: "2024-11-11",
      value: 100
    },
    {
      time: "2024-11-12",
      value: 100
    },
    {
      time: "2024-11-13",
      value: 200
    }
  ],
  merm: [],
  write: []
});
const getIndicators = () => {
  monitorMoudels.value = monitorMoudels.value.map(item => {
    item.option = setEchartsDefineOptions(dataList.value[item.key], item.data_unit);
    return item;
  });
};
const tabChangeHandler = value => {
  switch (value) {
    case "detail":
      break;
    case "indicators":
      getIndicators();
      break;
    default:
      break;
  }
};
// 打开弹窗
const openDialog = (id: number = 0) => {
  console.log(id);
  detailVisible.value = true;
};
// 关闭弹窗
const closeDialog = () => {
  detailVisible.value = false;
};
defineExpose({
  openDialog,
  closeDialog
});
</script>
<style lang="scss" scoped>
.module {
  height: 600px;
  padding-right: 6px;
  margin-right: 12px;
  overflow: auto;
  .module-top,
  .module-bottom {
    padding: 16px 24px 20px;
    border-radius: 4px;
  }
  .module-top {
    margin-top: 10px;
    margin-bottom: 12px;
    :deep(.ant-descriptions-item-content) {
      padding: 6px 24px;
    }
  }
  .module-bottom {
    height: auto;
    min-height: 500px;
    .no_tit {
      border: 1px solid #e8eaec;
      border-radius: 4px;
    }
  }
  .title {
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 700;
  }
}
:deep(.el-dialog__header) {
  display: none !important;
}
:deep(.el-tabs__header) {
  padding: 0 !important;
}
:deep(.el-tab-pane) {
  padding-right: 8px;
  overflow: auto;
}
.sub-title {
  height: 32px;
  margin: 12px 0;
  line-height: 32px;
}
.chart_box {
  height: 260px;
}
</style>
